<template>
  <div class="app-container">
    <el-row style="margin-bottom: 30px;">
      <el-col :span="6">
        <div class="title">
          <img src="../../assets/icons/注册.png" alt="register" class="icon">
          <span>个人注册</span>
        </div>
      </el-col>
    </el-row>

    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="6em" label-position="left" class="form-container">
      <el-row type="flex" justify="space-around">
        <el-col :span="10">
          <el-form-item prop="id">
            <p slot="label" style="letter-spacing: 2em;">
              工<span>号:</span>
            </p>
            <el-input v-model="ruleForm.id" />
          </el-form-item>
          <el-form-item prop="name">
            <p slot="label" style="letter-spacing: 2em;">
              姓<span>名:</span>
            </p>
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item prop="name">
            <p slot="label" style="letter-spacing: 2em;">
              部<span>门:</span>
            </p>
            <el-select v-model="ruleForm.dept" filterable placeholder="" style="width: 100%;">
              <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item prop="email">
            <p slot="label" style="letter-spacing: 2em;">
              邮<span>箱:</span>
            </p>
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item prop="tel">
            <p slot="label" style="letter-spacing: .5em;">
              手机<span>号:</span>
            </p>
            <el-input v-model="ruleForm.tel" />
          </el-form-item>
          <el-form-item prop="password">
            <p slot="label" style="letter-spacing: 2em;">
              密<span>码:</span>
            </p>
            <el-input v-model="ruleForm.password" type="password"/>
          </el-form-item>
          <el-form-item prop="repassword">
            <p slot="label">
              确认密<span>码:</span>
            </p>
            <el-input v-model="ruleForm.repassword" type="password" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="人脸录入" prop="faceuri" class="el-form--label-top">
            <el-input v-if="0" v-model="ruleForm.faceuri" />
            <video v-show="videoShow" id="video" />
            <canvas v-show="canvasShow" id="canvas" />
            <el-row type="flex" justify="space-around">
              <el-col :span="10">
                <el-button type="primary" style="width: 100%;" @click="turnOn">
                  {{ videoShow ? '开启摄像头' : '重新拍照' }}
                </el-button>
              </el-col>
              <el-col :span="8">
                <el-button type="primary" style="width: 100%;" @click="photo">
                  确认上传
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" style="width: 100%;letter-spacing:1em;font-size: 20px;" @click="submitForm('ruleForm')">注<span style="letter-spacing: 0;">册</span></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { validatePass } from '@/utils/validate'
import { findAllDept } from '@/api/dept.js'
import { addUser } from '@/api/user'
import { getMedia, takePhoto, stop } from '@/utils/camera'

export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!validatePass(value)) {
        callback(new Error('密码仅支持数字或英文'))
      } else {
        if (this.ruleForm.repassword !== '') {
          this.$refs.ruleForm.validateField('repassword')
        }
        callback()
      }
    }
    const validateRePassword = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      depts: [],
      ruleForm: {
        id: '',
        faceuri: '',
        name: '',
        email: '',
        tel: '',
        dept: '',
        password: '',
        repassword: ''
      },
      rules: {
        id: [{
          required: true,
          message: '请输入工号',
          trigger: ['blur', 'change']
        }],
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: ['blur', 'change']
        }],
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: ['blur', 'change']
        }, {
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change']
        }],
        tel: [{
          required: true,
          message: '请输入电话号码',
          trigger: ['blur', 'change']
        }, {
          min: 11,
          max: 11,
          message: '请输入正确的电话号码',
          trigger: ['blur', 'change']
        }],
        dept: [{
          required: true,
          message: '请输入部门',
          trigger: ['blur', 'change']
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: ['blur', 'change']
        },
        {
          min: 6,
          max: 16,
          message: '请正确输入密码(密码长度6 ~ 16位)',
          trigger: ['blur', 'change']
        },
        {
          validator: validatePassword,
          trigger: ['blur', 'change']
        }
        ],
        repassword: [{
          required: true,
          message: '请确认密码',
          trigger: ['blur', 'change']
        },
        {
          validator: validateRePassword,
          trigger: ['blur', 'change']
        }
        ],
        faceuri: [{
          required: true
        }]
      },
      videoShow: true,
      canvasShow: false
    }
  },
  async mounted() {
    const res = await findAllDept()
    this.depts = res.data.data
  },
  destroyed() {
    stop()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const user = Object.assign({}, this.ruleForm)
          delete user.repassword
          addUser(user).then(res => {
            if (res.data.code === 0) {
              this.$notify({
                title: '成功',
                message: '注册成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        } else {
          this.$notify({
            title: '失败',
            message: '注册失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    turnOn() {
      this.videoShow = true
      this.canvasShow = false
      const video = document.getElementById('video')
      const constraints = {
        video: {
          width: 300,
          height: 300
        },
        audio: false
      }
      getMedia(constraints, video)
    },
    photo() {
      const video = document.getElementById('video')
      const canvas = document.getElementById('canvas')
      const type = 'jpeg'
      const quality = 1
      const width = video.offsetWidth
      const height = video.offsetHeight
      const res = takePhoto(type, quality, video, canvas, width, height)
      this.ruleForm.faceuri = res.base64
      this.videoShow = false
      this.canvasShow = true
      this.$notify({
        title: '成功',
        message: '拍照完成',
        type: 'success',
        duration: 2000
      })
      stop()
    }
  }
}

</script>

<style lang="scss">
.form-container {
  .el-form-item {
    margin-bottom: 30px;
    label,
    .el-form-item__content {
      font-weight: 500;
      font-size: 18px;
      .el-input {
        font-size: 18px;
      }
      p {
        display: inline-block;
        margin: 0;
        span {
          letter-spacing: 0;
        }
      }
    }
  }
  .el-form--label-top {
    .el-form-item__label {
      display: block;
      text-align: center;
      margin: 0 auto;
    }
    .el-form-item__content {
      margin-left: 0 !important;
      #video {
        display: block;
        margin: 0 auto 30px;
      }
    }
  }
}

</style>

<style scoped>

#video {
  width: 300px;
  height: 300px;
  border: 1px solid grey;
}

#canvas {
  margin: 0 auto 30px;
  display: block;
}

</style>
